@import '../const.less';

.ant-table-thead > tr > th {
    padding: 13px 8px;
    border-bottom: 0px solid #fff;
    &:first-child {
        padding-left: 20px;
    }
    &:last-child {
        padding-right: 20px;
    }
}
.ant-table-tbody > tr > td {
    padding: 18.5px 8px;
    &:first-child {
        padding-left: 20px;
    }
    &:last-child {
        padding-right: 20px;
    }
}
.ant-table colgroup > col.ant-table-selection-col {
    width: 50px;
}
.ant-table-thead > tr > th.ant-table-selection-column {
    padding: 13px 12px 13px 20px;
    text-align: left;
}
.ant-table-tbody > tr > td.ant-table-selection-column {
    padding: 18.5px 12px 18.5px 20px;
    text-align: left;
}
.ant-table-middle {
    & > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
        &:first-child {
            padding-left: 20px;
        }
        &:last-child {
            padding-right: 20px;
        }
        padding: 10.5px 8px;
    }
    & > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
        &:first-child {
            padding-left: 20px;
        }
        &:last-child {
            padding-right: 20px;
        }
        padding: 12.5px 8px;
    }
    & > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th.ant-table-selection-column {
        padding: 13px 12px 13px 20px !important;
        text-align: left;
    }
    & > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td.ant-table-selection-column {
        padding: 13px 12px 13px 20px !important;
        text-align: left;
    }
    .ant-table-tbody > tr > td {
        padding: 13px 8px;
        &:first-child {
            padding-left: 20px;
        }
        &:last-child {
            padding-right: 20px;
        }
    }
}
.ant-table-small {
    border: 0;
    & > .ant-table-content > .ant-table-body {
        margin: 0;
    }
}
.ant-table-small {
    & > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
        &:first-child {
            padding-left: 20px;
        }
        &:last-child {
            padding-right: 20px;
        }
        padding: 8.5px 8px;
        // border-bottom: 1px solid #e8e8e8
    }
    & > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
    & > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
        &:first-child {
            padding-left: 20px;
        }
        &:last-child {
            padding-right: 20px;
        }
        padding: 8.5px 8px;
    }
}
.ant-table-thead > tr > th .ant-table-header-column .ant-table-column-sorters::before {
    display: none;
}
.ant-table-thead > tr > th .anticon-filter, .ant-table-thead > tr > th .ant-table-filter-icon {
    right: unset;
    top: -1.8px;
    background: transparent !important;
 }
 .ant-table-thead > tr > th.ant-table-column-sort {
    background: transparent;
 }
 .ant-table-tbody > tr > td.ant-table-column-sort {
    background: transparent;
 }
 .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
    background: transparent;
 }
 .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner-full {
    margin-top: -0.65em;
 }
.ant-table-footer {
    padding: 10px 20px;
    height: 56px;
    display: flex;
    margin-top: -1px;
    z-index: 11;
    align-items: center;
    position: relative;
    &::before {
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        content: '';
    }
}

.ant-pagination-total-text {
    color: #666666;
    line-height: 32px;
}
.ant-pagination.mini .ant-pagination-item {
    border: 1px solid transparent;
    line-height: 24px;
}

.ant-pagination.mini .ant-pagination-total-text, .ant-pagination.mini .ant-pagination-simple-pager {
    line-height: 26px;
}

.dt-table-scrollbar {
    // 正常列表 存在纵向滚动 会因为 scrollbar 导致列错位
    // 所以需要添加 .ant-table-header 的 scrollbar 设置
    .ant-table-body, .ant-table-body-inner, .ant-table-header{
        &::-webkit-scrollbar {
            width: 15px;  // 纵向滚动条宽度
            height: 13px;   // 横向滚动条高度（不同系统存在差异，目前按照windows设定） 数值太大\太小都会导致fixed列与普通列错位
        }
        &::-webkit-scrollbar-thumb {
            background: #bfbfbf;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 2px;
        }
    }
    .ant-table-header {
        &::-webkit-scrollbar-thumb {
            background: transparent;
        }
    }
    // 修改滚动条 会导致 header 与 body的列有偏差错位 因为滚动条 占据了body一定的宽度
    // 所以 设置 header 也存在滚动边框
    // 但是会导致 滚动时 header右侧 会有一小部分的文字遮挡 并且会有一小截底部边框（滚动边框）
    .ant-table-scroll {
        .ant-table-header {
            overflow: scroll !important;
        }
    }
}

// 超出才显示滚动条 弊端： 高度固定表格中 当不存在数据的时候 fixed模块 横向滚动条存在
// .ant-table-body, .ant-table-body-inner {
//     overflow-y: auto !important;
// }

// 隐藏 表格中 fixed 模块代码横向滚动条 用于固定高度表格无数据时 (未优化 windows 滚动条样式时使用
.dt-table-fixed-overflowx-auto {
    .ant-table-body-inner {
        overflow-x: auto !important;
    }
}

// 自带分页 样式设置
.ant-table-wrapper {
    .ant-spin-container {
        > .ant-table-pagination {
            width: 100%;
            margin: -1px 0px 0px;
            padding: 0px 20px;
            height: 56px;
            line-height: 56px;
            text-align: right;
            position: relative;
            z-index: 10;
        }
    }

}

// 固定表格高度(footer实现分页）
.dt-table-fixed-contain-footer {
    .ant-table-wrapper, &.ant-table-wrapper {
        height: 100%;
        padding: 0 !important;
        box-shadow: 0px 2px 8px 0px rgba(6,14,26,0.08);
        .ant-spin-nested-loading {
            height: 100%;
            .ant-spin-container {
                height: 100%;
                .ant-table-fixed-header {
                    height: 100%;
                    .ant-table-content {
                        height: 100%;
                        .ant-table-scroll {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            .ant-table-body {
                                flex:1;
                                /** 内部嵌套表格，数据为空的情况 */
                                .ant-table-expanded-row .ant-table-empty {
                                    .ant-table-placeholder {
                                        position: relative;
                                        top: unset
                                    }
                                }
                            }
                        }
                        .ant-table-fixed-left, .ant-table-fixed-right {
                            z-index: 10;
                            height: 100%;
                            .ant-table-body-outer {
                                height: calc(100% - 44px - 56px + 1px);
                            }
                        }
                        .ant-table-placeholder {
                            position: absolute;
                            top: 45px;
                            width: 100%;
                            text-align: center;
                            border: none;
                        }
                    }
                }
                .ant-table-footer {
                    margin-top: -1px;
                    z-index: 11;
                    position: relative;
                    &::before {
                        position: absolute;
                        top: -1px;
                        left: 0;
                        width: 100%;
                        content: '';
                    }
                    .ant-pagination {
                        position: absolute;
                        right: 20px;
                        .pagination_total {
                            color: #3F87FF;
                        }
                    }
                }
            }
        }
    }
}

// 固定表格高度(自带分页）
.dt-table-fixed-base {
    &.ant-table-wrapper, .ant-table-wrapper {
        height: 100%;
        padding: 0 !important;
        box-shadow: 0px 2px 8px 0px rgba(6,14,26,0.08);
        .ant-spin-nested-loading {
            height: 100%;
            .ant-spin-container {
                height: 100%;
                .ant-table-fixed-header {
                    // 存在数据的时候 有分页组件存在 高度需要减去分页的高度
                    &:not(:last-child) {
                        height: calc(100% - 56px) !important;
                    }
                    height: 100%; // 分页高度为 67px
                    .ant-table-content {
                        height: 100%;
                        .ant-table-scroll {
                            height: 100%;
                            .ant-table-body {
                                height: calc(100% - 44px); // 表格 header 高度为 44px
                                /** 内部嵌套表格，数据为空的情况 */
                                .ant-table-expanded-row .ant-table-empty {
                                    .ant-table-placeholder {
                                        position: relative;
                                        top: unset
                                    }
                                }
                            }
                        }
                        .ant-table-fixed-right, .ant-table-fixed-left {
                            // height: 100%;
                            height: calc(100% - 18px);
                            z-index: 10;
                            .ant-table-body-outer {
                                height: calc(100% - 44px);
                                .ant-table-body-inner {
                                    overflow-x: hidden !important;
                                    overflow-y: auto !important;
                                    height: 100%;
                                }
                            }
                        }
                        .ant-table-placeholder {
                            position: absolute;
                            top: 45px;
                            width: 100%;
                            color: #BFBFBF;
                            text-align: center;
                            border: none;
                        }
                    }
                }
            }
        }
    }
}

// 优化固定高度表格 当数据为空时 


//size = middle的表格中的分页
.dt-pagination-lower {
    .ant-table-pagination.ant-pagination {
        height: 44px;
        line-height: 44px;
    }
}
// size = small的表格中的分页
.dt-pagination-small {
    .ant-table-pagination.ant-pagination {
        height: 36px;
        line-height: 36px;
    }
}
// 不需要最后一列的下边框 (一般在表格存在外边框时使用)
.dt-table-last-row-noborder {
    .ant-table-tbody {
        > tr:last-child {
            > td {
                border-bottom-color: rgba(0,0,0,0) !important;
            }
        }
    }
    .ant-table-placeholder {
        border-bottom-color: rgba(0,0,0,0) !important;
    }
}
